import React, {Component} from 'react';
import {Button, Select, Checkbox, Row, Col} from "antd";
import APIS from "@/apis";
import MdDocShow from "@/components/MdDocShow";
import {newGuid} from "@/utils/utils";
import "../index.css"

const {Option} = Select;

interface INewQuestion {
  type: QuestionType,//试题类型
  courseList: Array<any>;//课程列表
  courseId: number;//所属课程id
  courseName: string;//所属课程名称
  selectItems: Array<any>;//选项集合
  answer: string;//正确答案
  analyzing: string;//解析
  id: number;//题目id
  content: string;
}

/*查看题目*/
class ViewQuestion extends Component <any, INewQuestion> {
  constructor(props: any) {
    super(props);
    this.state = {
      type: null,
      courseList: [],
      courseId: 0,
      selectItems: [],
      answer: "",
      analyzing: "",
      courseName: "",
      content: "",
      id: 0
    }
  }

  componentDidMount() {
    let params = new URLSearchParams(this.props.history.location.search);
    if (params.has('id')) {
      const id = parseInt(params.get('id') + '');
      if (id) {
        if (id > 0) {
          APIS.ExamAPI.GetQuestionDetail({id: id}).then((resp) => {
            console.log(resp);
            const select = [];
            resp.selections?.map((ele, ind) => {
              select.push({id: newGuid(), value: ele});
            })
            this.setState({
              answer: resp.answer,
              analyzing: resp.analyzing,
              courseId: resp.courseId,
              courseName: resp.courseName,
              type: resp.type,
              content: resp.content,
              id: resp.id,
              selectItems: select
            });
          }).catch(e => console.error(e));
        }
      }
    }
  }


  //选择题正确选项
  renderCheckBox() {
    const checked = this.state.answer.split(',');
    const nums = [];
    checked.forEach((value => {
      nums.push(Number(value))
    }))
    return <Checkbox.Group value={nums} style={{width: '100%'}}>
      <Row>
        {
          this.state.selectItems.map((element, index) => {
            const str = String.fromCharCode(65 + index);
            return <Col key={element.id} span={4}>
              <Checkbox value={index}>{str}</Checkbox>
            </Col>
          })
        }
      </Row>
    </Checkbox.Group>
  }

  /*试题类型变化*/
  onTypeChange = (e) => {
    this.setState({type: e});
    this.clearContent();
  }


  clearContent() {
    this.setState({
      selectItems: [],
      answer: "",
      analyzing: ""
    });
  }

  renderJudgment() {
    return <div>
      <Select style={{width: 320}} value={this.state.answer} placeholder={"请选择答案"}
              onChange={(e) => {
                this.setState({answer: e});
              }}>
        <Option value={"1"}>正确</Option>
        <Option value={"0"}>错误</Option>
      </Select>
    </div>
  }

  render() {
    const {type, selectItems, content, analyzing, answer} = this.state;
    return (
      <div style={{
        width: "100%",
        height: "auto",
        marginTop: 20
      }}>
        {/*题目*/}
        <div id="question-topic" style={{width: "100%", height: "auto", marginTop: 20}}>
          <h3 className="required">试题题目:</h3>
          <MdDocShow id={newGuid()} value={content}/>
          {/*<MdEditor id={"question-topic-edit"} width={"100%"} height={200} onRef={(ref) => this.questionTopic = ref}/>*/}
        </div>
        {
          type === QuestionType.select ? <div>
            {/*选项*/}
            <div id="question-options" style={{height: "auto", marginTop: 20}}>
              <h3 className="required">选项:</h3>
              {
                selectItems?.map((element, index) => {
                  return <div key={index}
                              style={{
                                width: "100%",
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 10
                              }}>
                    <span>{String.fromCharCode(65 + index) + '. '}</span> <MdDocShow id={element.id}
                                                                                     style={{width: "98%"}}
                                                                                     value={element.value}/>
                  </div>
                })
              }
            </div>
          </div> : null
        }

        {/*正确答案*/}
        <div id="correct-answer">
          <h3 className="required">正确答案:</h3>
          {
            type === QuestionType.select ?
              <div>
                {
                  this.renderCheckBox()
                }
              </div>
              : type === QuestionType.judgment ?
              <div>
                {this.renderJudgment()}
              </div> :
              <h4>
                {answer}
              </h4>

          }
        </div>
        {/*解析*/}
        <div id="parsing" style={{marginTop: 10}}>
          <h3>解析:</h3>
          <h4>
            {analyzing}
          </h4>
        </div>
        <div style={{marginTop: 20, display: "flex", justifyContent: "flex-end"}}>
          <Button style={{marginRight: 20}} onClick={() => {
            this.props.history.push({
              pathname: '/teaching/exam/question'
            });
          }}>
            退出
          </Button>
        </div>
      </div>
    );
  }
}

export default ViewQuestion;

enum QuestionType {
  select = 1,
  judgment,
  fill,
  answer
}
